<template>
   <div class="md:card w-full md:max-w-md md:shadow-2xl md:bg-base-100/80">
      <div class="md:card-body">
        <!-- 标题区域 -->
        <div class="text-center mb-6">
          <div class="avatar avatar-placeholder">
            <div class="w-20 rounded-full  bg-primary text-primary-content flex items-center justify-center">
             <font-awesome-icon icon="user-plus" size="2x"></font-awesome-icon>
            </div>
          </div>
          <h1 class="text-3xl font-bold text-primary">创建账号</h1>
          <p class="text-base-content/70 mt-2">填写信息注册新账号</p>
        </div>
        <!-- 步骤条 -->
        <div class="mb-6">
          <steps :map="['选择联系方式', '发送验证码', '注册账号']" v-model="currentStep"></steps>        
        </div>

        <!-- 注册表单 -->
        <div class="space-y-4">
          <router-view></router-view>
        </div>

        <!-- 分隔线 -->
        <div class="divider my-6">或</div>

        <!-- 已有账号链接 -->
        <div class="text-center">
          <p class="text-sm text-base-content/70">
            已有账号?
            <router-link class="link link-primary" to="/guest/login/password">立即登录</router-link>
          </p>
        </div>
      </div>
    </div>
</template>

<script>
import {steps} from '@/extensions/components'
import {useRegisterStore} from '@/pages/guest/register/register'
const registerStore = useRegisterStore();
export default {
  components: {
    steps
  },
  data() {
    let currentStep = this.getCurrentStep();
    //没有选择联系方式，不能直接到第二步,第三步
    if(currentStep>0 && !registerStore.contactType){
      this.$router.replace('/guest/register');
    }
    return {
      currentStep:currentStep,
      registerStore
    }
  },
  computed: {
   
  },
  methods: {
    getCurrentStep(){
      let path = this.$router.currentRoute.value.path;
      let currentStep = 0;
      if (path === '/guest/register/step1') {
        currentStep = 1; 
      }else if (path === '/guest/register/step2') {
        currentStep = 2;
      }
      return currentStep;
    },
  },
  watch: {
    '$route'(to, from) {
      this.currentStep = this.getCurrentStep();
    }
  },
  created() {
    this.registerStore.fetchData();
  }
 
}
</script>
